<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title data-i18n="resources.title_popDensityRange"></title>
    <link rel="stylesheet" href="http://iclient.supermap.io/libs/iclient8c/examples/css/nanoscroller.css"/>
    <link rel="stylesheet"
          href="http://iclient.supermap.io/libs/iclient8c/examples/js/plugins/infoWindow/infoWindow.css"/>
    <link rel="stylesheet" href="../assets/layui-v2.4.5/css/layui.css">
    <style type="text/css">
        html, body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid #3473b7;
            z-index: 1;
        }

        #marker__contentDiv {
            height: 90px !important;
            top: 10px !important;
        }

        #picEx {
            z-index: 9;
            width: 300px;
            height: 200px;
            background: #ffffff;
            /*border: solid 1px red;*/
            position: absolute;
            right: 20px;
            bottom: 50px;
        }

        #picEx li {

            font-size: 18px;
            margin-top: 10px;
            margin-left: 50px;
        }

        #picEx div {
            font-size: 18px;
            margin-top: 10px;
            margin-left: 20px;
        }

        #d1, #d2, #d3, #d4, #d5 {
            width: 60px;
            height: 10px;
        }

        #d1 {
            background: #C9E1FE;
        }

        #d2 {
            background: #7B68EE;
        }

        #d3 {
            background: #32CD32;
        }

        #d4 {
            background: #FF7F50;
        }

        #d5 {
            background: #FF0000;
        }

        #tl {
            z-index: 9;
            background: #ffffff;
            position: absolute;
            right: 50px;
            bottom: 10px;
        }

        #time {
            z-index: 9;
            /*background: #ffffff;*/
            position: absolute;
            /*right: 0px;*/
            bottom: 10px;
            left: 200px;
        }

        #time li {
            float: left;
        }

        .layui-timeline-content, .layui-text {
            width: 100px;
            /*height: 0px;*/
            border: solid 1px red;
            margin-top: 10px;
        }

    </style>
</head>
<body>
<div id="map"></div>
<div id="tl">
    <button class="layui-btn layui-btn-normal" id="tl_btn">图例</button>
</div>
<div id="picEx" style="display: none">
    <ul>
        <div>图例：</div>
        <li>< 1000<span><div id="d1" class="layui-input-inline"></div></span></li>
        <li>1000-5000
            <div id="d2" class="layui-input-inline"></div>
        </li>
        <li>5000-10000
            <div id="d3" class="layui-input-inline"></div>
        </li>
        <li>10000-20000
            <div id="d4" class="layui-input-inline"></div>
        </li>
        <li>> 20000
            <div id="d5" class="layui-input-inline"></div>
        </li>
    </ul>
</div>
<div id="time">
    <ul class="layui-timeline" id="time_ul">
        <div class="layui-input-inline">
            <div>2014年</div>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                </div>
            </li>
        </div>
        <div class="layui-input-inline">
            <div>2015年</div>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                </div>
            </li>
        </div>
        <div class="layui-input-inline">
            <div>2016年</div>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                </div>
            </li>
        </div>
        <div class="layui-input-inline">
            <div>2017年</div>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                </div>
            </li>
        </div>
    </ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script exclude="iclient-classic" src="http://iclient.supermap.io/dist/classic/include-classic.js"></script>
<script src="http://iclient.supermap.io/libs/iclient8c/examples/js/plugins/infoWindow/InfoWindow.js"></script>
<script src="http://iclient.supermap.io/libs/iclient8c/examples/js/jquery.nanoscroller.min.js"></script>
<script src="../js/zt/specialTopic.js"></script>
<script type="text/javascript">

    var api = "";

    var host = "http://118.25.235.51:8090",
        url1 = host + "/iserver/services/map-China4003/rest/maps/baseLayer",
        url2 = host + "/iserver/services/data-China4006/rest/data";

    var map, layer;

    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            })]
    });

    layer = new SuperMap.Layer.TiledDynamicRESTLayer("china", url1, {
        transparent: true,
        cacheEnabled: true
    }, {maxResolution: "auto"});

    layer.events.on({"layerInitialized": addLayer});

    function addLayer() {

        map.addLayers([layer]);
        map.setCenter(
            new SuperMap.LonLat(109.5, 36).transform(
                new SuperMap.Projection("EPSG:4326"),
                new SuperMap.Projection("EPSG:3857")
            ), 7);
//这一个放在ajax里面,放在addlayer后执行，数据接入后可以注释掉了
        specialTopic({
            map: map,
            url: url2,
            colors: [{start: 0, end: 1000, style: {color: 'rgb( 201,225,254 )'}}, {
                start: 1000,
                end: 5000,
                style: {color: 'rgb( 123,104,238 )'}
            }, {
                start: 5000,
                end: 10000,
                style: {color: 'rgb( 50,205,50 )'}
            }, {
                start: 10000,
                end: 20000,
                style: {color: 'rgb( 255,127,80)'}
            }, {
                start: 10000,
                end: 999999,
                style: {color: 'rgb( 255,0,0)'}
            }],
            items: [{name: '万荣县', value: 210}, {name: '长子县', value: 4500}, {name: '黄龙县', value: 21000}],//数据返回格式
            dataSourceName: 'AppleData',
            dataSourceFilter: 'SMID > -1',
            datasetNames: ["AppleData:黄土高原产区_county"],
            callbackHtml: function (fea) {
                var html = "<p>地区: " + fea.attributes.NAME + "</p>"
                    + "<p>产量: " + fea.attributes.area + "</p>";
                return html;
            }
        });
    }
//控制图例div的显示隐藏
    $("#tl_btn").on("click", function () {
        if ($("#picEx").css("display") == 'none') {//如果show是隐藏的

            $("#picEx").css("display", "block");//show的display属性设置为block（显示）

        } else {//如果show是显示的

            $("#picEx").css("display", "none");//show的display属性设置为none（隐藏）

        }
    })

    //ajax获取年，展示时间轴,接入数据后把html上面的div去掉
    function year() {
        $.ajax({
            url: api,
            type: "get",
            dataType: "json",
            async: false,
            success: function (result) {
                if (result != null) {
                    for (var i = 0; i < result.length; i++) {
                        $("#time_ul").append(" <div style=\"margin-left: -10px\" class=\"layui-input-inline\">\n" +
                            "            <div>" + result.year + "年</div><li class=\"layui-timeline-item\">\n" +
                            "                <i class=\"layui-icon layui-timeline-axis\" onclick=\"timeMap('" + result.year + "')\"></i>\n" +
                            "                <div class=\"layui-timeline-content layui-text\">\n" +
                            "                </div>\n" +
                            "            </li>\n" +
                            "        </div>");
                    }
                }
            }
        });
    }

    year();

    //按年查询数据
    function timeMap(year) {
        $.ajax({
            url: api,
            type: "get",
            dataType: "json",
            async: false,
            data: {
                "year": year
            },
            success: function (result) {
                if (result != null) {
                    mapData(result);
                }
            }
        });
    }

    function mapData(data) {
        //这一个放在ajax里面,放在addlayer后执行
        specialTopic({
            map: map,
            url: url2,
            colors: [{start: 0, end: 1000, style: {color: 'rgb( 201,225,254 )'}}, {
                start: 1000,
                end: 5000,
                style: {color: 'rgb( 123,104,238 )'}
            }, {
                start: 5000,
                end: 10000,
                style: {color: 'rgb( 50,205,50 )'}
            }, {
                start: 10000,
                end: 20000,
                style: {color: 'rgb( 255,127,80)'}
            }, {
                start: 10000,
                end: 999999,
                style: {color: 'rgb( 255,0,0)'}
            }],
            items: data,
            dataSourceName: 'AppleData',
            dataSourceFilter: 'SMID > -1',
            datasetNames: ["AppleData:黄土高原产区_county"],
            callbackHtml: function (fea) {
                var html = "<p>地区: " + fea.attributes.NAME + "</p>"
                    + "<p>产量: " + fea.attributes.area + "</p>";
                return html;
            }
        });
    }
</script>
</body>
</html>